import React, { useEffect, useState, useCallback } from 'react';
import { connect } from 'dva';
import { Table, Button, Pagination } from 'antd';
import { PlusOutlined, DownloadOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import TableSelector from '../mach_archives/components/TableSelector';
import style from '@/pages/IndexPage.css';
import { modelsPath } from '../../global_monitor/canvas_manage/requireModels';
import MachDetail from './components/MachDetail';
// 导入模型产品图的映射关系

const energyMaps = {
    1:'eleMeter',
    2:'waterMeter',
    3:'waterMeter',
    4:'eleMeter',
    5:'eleMeter',
    6:'coldMeter',
    8:'hostMach',
    9:'flowMeter',
    10:'waterPump',
    11:'coldMeter',
    12:'waterPump'
};

function MachMonitor({ dispatch, user, mach }){
    const { authorized } = user;
    const { machTypes, machList, tplList, currentPage, total } = mach;
    const [info, setInfo] = useState({});
    useEffect(()=>{
        if ( authorized ) {
            dispatch({ type:'mach/fetchMachList' });
        }
    },[authorized]);
    const handleSearch = useCallback((obj) => {
        dispatch({ type: 'mach/setOptional', payload:obj });
        dispatch({ type: 'mach/fetchMachList' });
    }, []);
    return (
        Object.keys(info).length 
        ?
        // 单个设备详情
        <MachDetail info={info} onBack={()=>setInfo({})} />
        :
        <div className={style['page-container']}>
            <div style={{ height:'90px' }}>
                <TableSelector modelTypes={machTypes} onSearch={handleSearch}  />
            </div>
            <div style={{ height:'calc( 100% - 90px)', paddingTop:'1rem' }}>
                <div style={{ height:'92%' }}>
                    {
                        machList.map((item, index)=>{
                            let path = index % 2 === 0 ? ( modelsPath[energyMaps[item.energyType]].onPath || modelsPath[energyMaps[item.energyType]].path ) : ( modelsPath[energyMaps[item.energyType]].offPath || modelsPath[energyMaps[item.energyType]].path );
                            return (<div key={item.machId} style={{ 
                                display:'inline-block',
                                width:'25%',
                                height:'32%',
                                padding:'0 1rem 1rem 0'
                            }}>
                                <div
                                    style={{
                                        display:'flex',
                                        flexDirection:'column',
                                        height:'100%',                                
                                        backgroundImage:'linear-gradient(to Bottom, #fff, #f2f2f2)',
                                    }}
                                    onClick={()=>setInfo({ ...item, path })}
                                >
                                    <div style={{ 
                                        height:'calc( 100% - 4rem)',
                                        backgroundRepeat:'no-repeat',
                                        backgroundImage:`url(${path})`,
                                        backgroundSize:'auto 70%',
                                        backgroundPosition:'50% 50%'
                                    }}></div>
                                    <div style={{ height:'4rem', display:'flex', alignItems:'center', backgroundColor:'#fff', padding:'0 1rem' }}>
                                        <span>{ item.meterName }</span>
                                        <span className={style['custom-tag'] + ' ' + ( index % 2 === 0 ? style['success'] : style['fail'] )} style={{ margin:'0 1rem' }}>
                                            <span className={style['dot']}></span>
                                            <span>{ index % 2 === 0 ? '运行中' : '停止' }</span>
                                        </span>
                                        {/* <img src={ index % 2 === 0 ? NormalIcon : WarningIcon } style={{ width:'16px', marginRight:'4px' }} /> */}
                                        <span>{ index % 2 === 0 ? '正常' : '告警' }</span>
                                    </div>
                                </div>
                            </div> )                       
                        })
                    }
                </div>
                <Pagination style={{ marginTop:'1rem' }} />            
            </div>
        </div>
    )
}

export default connect(({ user, mach })=>({ user, mach }))(MachMonitor)